06_sample_CSS

画像サンプル集

Illustrator / Tools

画像ファイルについて

背景カラーは #535454 で作成してあります.
グレーの部分は #c8c8c8 となっています.

■ ファイル名に付いている _Select は「Select」( セレクト・ツール ) のことです.
■ 同じように _Draw は「Draw」( ドロウ・ツール ) / _Type は「Type」( タイプ・ツール ) / _Paint は「Paint」( ペイント・ツール ) / _Modify は「Modify」( モディファイ・ツール ) / _Navigate は「Navigate」( ナビゲート・ツール ) です.

■ この素材集の使用目的
アイコンを組み合わせて Illustrator のツール・パネルを作り, ツールの名前と種類 / 使用方法を説明するWebページを作ることです. 自分なりのセットを考案し, いろいろなツール・パネルを作成してください.

■ CSS を使用してカーソルを画像に合わせると hover してカラーが変化したり, ツールの情報が表示されるように工夫してください.

■ 現在の Illustrator の Tool は 86種類ありますが, これらのアイコンがどのような理由でデザインされているのか(ネーミングされているのか)を考えてみましょう. キーボード・ショートカットと合わせて, ツールがパネル内に配置されている順番も研究すると面白いです.

■ 　　　　　　　　　　

■ 　　　　　　　　　　

sample Illustrator Tools

Select(6)

Selection tool / ai_Select_01.png

Direct selection tool / ai_Select_02_a.png

Group selection tool / ai_Select_02_b.png

Magic wand tool / ai_Select_03.png

Lasso tool / ai_Select_04.png

Artboard tool / ai_Navigate_27_b.png

Draw(44)

Pen tool / ai_Draw_05_a.png

Add anchor Point tool / ai_Draw_05_b.png

Delete anchor Point tool / ai_Draw_05_c.png

Anchor point tool / ai_Draw_05_d.png

Curvature tool / ai_Draw_06.png

Line segment tool / ai_Draw_08_a.png

Arc tool / ai_Draw_08_b.png

Spiral tool / ai_Draw_08_c.png

Rectangular grid tool / ai_Draw_08_d.png

Polar grid tool / ai_Draw_08_e.png

Rectangle tool / ai_Draw_09_a.png

Rounded rectangle tool / ai_Draw_09_b.png

Ellipse tool / ai_Draw_09_c.png

Polygon tool / ai_Draw_09_d.png

Star tool / ai_Draw_09_e.png

Flare tool / ai_Draw_09_f.png

Paintbrush tool / ai_Draw_10_a.png

Blob brush tool / ai_Draw_10_b.png

Shaper tool / ai_Draw_11_a.png

Pencil tool / ai_Draw_11_b.png

Smooth tool / ai_Draw_11_c.png

Path eraser tool / ai_Draw_11_d.png

Join tool / ai_Draw_11_e.png

Symbol sprayer tool / ai_Draw_18_a.png

Symbol shifter tool / ai_Draw_18_b.png

Symbol scruncher tool / ai_Draw_23_a.png

Symbol sizer tool / ai_Draw_23_b.png

Symbol spinner tool / ai_Draw_23_c.png

Symbol stainer tool / ai_Draw_23_d.png

Symbol screener tool / ai_Draw_23_e.png

Symbol styler tool tool / ai_Draw_23_f.png

Column graph tool / ai_Draw_23_g.png

Stacked column graph tool / ai_Draw_23_h.png

Bar graph tool / ai_Draw_24_a.png

Stacked bar graph tool / ai_Draw_24_b.png

Line graph tool / ai_Draw_24_c.png

Area graph tool / ai_Draw_24_d.png

Scatter graph tool/ ai_Draw_24_e.png

Pie graph tool / ai_Draw_24_f.png

Radar graph tool / ai_Draw_24_g.png

Slice tool / ai_Draw_24_h.png

Slice selection tool / ai_Draw_24_i.png

Perspective grid tool / ai_Draw_26_a.png

Perspective selection tool / ai_Draw_26_b.png

Type(7)

Type tool / ai_Type_07_a.png

Area type tool / ai_Type_07_b.png

Type on a path tool / ai_Type_07_c.png

Vertical type tool / ai_Type_07_d.png

Vertical area Type tool / ai_Type_07_e.png

Vertical type on a path tool / ai_Type_07_f.png

Touch type tool / ai_Type_07_g.png

Paint(5)

Gradient tool / ai_Paint_17_a.png

Mesh tool / ai_Paint_17_b.png

Shape builder tool / ai_Paint_17_c.png

Live paint bucket tool / ai_Paint_19.png

Live paint selection tool / ai_Paint_20.png

Modify(21)

Rotate tool / ai_Modify_12_a.png

Reflect tool / ai_Modify_12_b.png

Scale tool / ai_Modify_12_c.png

Shear tool / ai_Modify_13_a.png

Reshape tool / ai_Modify_13_b.png

Width tool / ai_Modify_14_a.png

Warp tool / ai_Modify_14_b.png

Twirl tool / ai_Modify_14_c.png

Pucker tool / ai_Modify_15_a.png

Bloat tool / ai_Modify_15_b.png

Scallop tool / ai_Modify_15_c.png

Crystallize tool / ai_Modify_15_d.png

Wrinkle tool / ai_Modify_15_e.png

Puppet warp tool / ai_Modify_15_f.png

Free transform tool / ai_Modify_15_d.png

Eyedropper tool / ai_Modify_15_h.png

Measure tool / ai_Modify_16_a.png

Blend tool / ai_Modify_16_b.png

Eraser tool / ai_Modify_21_a.png

Scissors tool / ai_Modify_21_b.png

Knife tool / ai_Modify_22.png

Navigate(3)

Hand tool / ai_Navigate_27_a.png

Print tiling tool / ai_Navigate_27_b.png

Zoom tool / ai_Navigate_28.png

Illustrator_toolbar_535454.png

　

sample ここまで

Download

Select

1▽ Selection tool / ai_Select_01.png

2▽ Direct selection tool / ai_Select_02_a.png

3▽ Group selection tool / ai_Select_02_b.png

4▽ Magic wand tool / ai_Select_03.png

5▽ Lasso tool / ai_Select_04.png

6▽ Artboard tool / ai_Navigate_27_b.png

Draw

7▽ Pen tool / ai_Draw_05_a.png

8▽ Add anchor Point tool / ai_Draw_05_b.png

9▽ Delete anchor Point tool / ai_Draw_05_c.png

10▽ Anchor point tool / ai_Draw_05_d.png

11▽ Curvature tool / ai_Draw_06.png

12▽ Line segment tool / ai_Draw_08_a.png

13▽ Arc tool / ai_Draw_08_b.png

14▽ Spiral tool / ai_Draw_08_c.png

15▽ Rectangular grid tool / ai_Draw_08_d.png

16▽ Polar grid tool / ai_Draw_08_e.png

17▽ Rectangle tool / ai_Draw_09_a.png

18▽ Rounded rectangle tool / ai_Draw_09_b.png

19▽ Ellipse tool / ai_Draw_09_c.png

20▽ Polygon tool / ai_Draw_09_d.png

21▽ Star tool / ai_Draw_09_e.png

22▽ Flare tool / ai_Draw_09_f.png

23▽ Paintbrush tool / ai_Draw_10_a.png

24▽ Blob brush tool / ai_Draw_10_b.png

25▽ Shaper tool / ai_Draw_11_a.png

26▽ Pencil tool / ai_Draw_11_b.png

27▽ Smooth tool / ai_Draw_11_c.png

28▽ Path eraser tool / ai_Draw_11_d.png

29▽ Join tool / ai_Draw_11_e.png

30▽ Symbol sprayer tool / ai_Draw_18_a.png

31▽ Symbol shifter tool / ai_Draw_18_b.png

32▽ Symbol scruncher tool / ai_Draw_23_a.png

33▽ Symbol sizer tool / ai_Draw_23_b.png

34▽ Symbol spinner tool / ai_Draw_23_c.png

35▽ Symbol stainer tool / ai_Draw_23_d.png

36▽ Symbol screener tool / ai_Draw_23_e.png

37▽ Symbol styler tool / ai_Draw_23_f.png

38▽ Column graph tool / ai_Draw_23_g.png

39▽ Stacked column graph tool / ai_Draw_23_h.png

40▽ Bar graph tool / ai_Draw_24_a.png

41▽ Stacked bar graph tool / ai_Draw_24_b.png

42▽ Line graph tool / ai_Draw_24_c.png

43▽ Area graph tool / ai_Draw_24_d.png

44▽ Scatter graph tool / ai_Draw_24_e.png

45▽ Pie graph tool / ai_Draw_24_f.png

46▽ Radar graph tool / ai_Draw_24_g.png

47▽ Slice tool / ai_Draw_24_h.png

48▽ Slice selection tool / ai_Draw_24_i.png

49▽ Perspective grid tool / ai_Draw_26_a.png

50▽ Perspective selection tool / ai_Draw_26_b.png

Type

51▽ Type tool / ai_Type_07_a.png

52▽ Area type tool / ai_Type_07_b.png

53▽ Type on a path tool / ai_Type_07_c.png

54▽ Vertical type tool / ai_Type_07_d.png

55▽ Vertical area Type tool / ai_Type_07_e.png

56▽ Vertical type on a path tool / ai_Type_07_f.png

57▽ Touch type tool / ai_Type_07_g.png

Paint

58▽ Gradient tool / ai_Paint_17_a.png

59▽ Mesh tool / ai_Paint_17_b.png

60▽ Shape builder tool / ai_Paint_17_c.png

61▽ Live paint bucket tool / ai_Paint_19.png

62▽ Live paint selection tool / ai_Paint_20.png

Modify

63▽ Rotate tool / ai_Modify_12_a.png

64▽ Reflect tool / ai_Modify_12_b.png

65▽ Scale tool / ai_Modify_12_c.png

66▽ Shear tool / ai_Modify_13_a.png

67▽ Reshape tool / ai_Modify_13_b.png

68▽ Width tool / ai_Modify_14_a.png

69▽ Warp tool / ai_Modify_14_b.png

70▽ Twirl tool / ai_Modify_14_c.png

71▽ Pucker tool / ai_Modify_15_a.png

72▽ Bloat tool / ai_Modify_15_b.png

73▽ Scallop tool / ai_Modify_15_c.png

74▽ Crystallize tool / ai_Modify_15_d.png

75▽ Wrinkle tool / ai_Modify_15_e.png

76▽ Puppet warp tool / ai_Modify_15_f.png

77▽ Free transform tool / ai_Modify_15_g.png

78▽ Eyedropper tool / ai_Modify_15_h.png

79▽ Measure tool / ai_Modify_16_a.png

80▽ Blend tool / ai_Modify_16_b.png

81▽ Eraser tool / ai_Modify_21_a.png

82▽ Scissors tool / ai_Modify_21_b.png

83▽ Knife tool / ai_Modify_22.png

Navigate

84▽ Hand tool / ai_Navigate_27_a.png

85▽ Print tiling tool / ai_Navigate_27_b.png

86▽ Zoom tool / ai_Navigate_28.png

▽ Illustrator_toolbar_535454.png